<template>
  <h2 ref="title2">地球世界</h2>
  <button @click="findH2">查找h2标签</button>
  <Person ref="ren" />
</template>

<script lang="ts" setup>
import Person from './components/Person.vue'
import { ref } from 'vue'

// vue中,利用 普通 标签的ref属性,查找相关的标签;而不是使用传统的id标签
let title2 = ref()
// vue中,利用 组件 标签的ref属性,查找相关的标签;
// vue3中如果想看到组件中属性,需要在组件中通过defineExpose暴露相关变量
let ren = ref()

function findH2() {
  console.log('App==>', title2.value)
}
</script>

<!-- scoped表示该处定义的style只在当前组件内生效 -->
<style scoped></style>
